<template>
    <div>
        <el-dialog
                title="添加课程订单"
                :visible.sync="saveNewCourseOrderShow"
                :show-close="false"
                :before-close="handleClose"
                @open="onOpen">
            <div style="height: 400px">
                <el-form label-position="right" :rules="rules" :model="courseOrder" ref="ruleForm" label-width="86px">
                    <el-form-item label="课程名称">
                        <el-input v-model="courseOrder.name" placeholder="请输入课程名称" disabled/>
                    </el-form-item>
                    <el-form-item label="课程价格" prop="price">
                        <el-input v-model="courseOrder.price" placeholder="请输入价格" disabled/>
                    </el-form-item>
                    <el-form-item label="课时" prop="course_times">
                        <el-input-number v-model="courseOrder.courseTimes" disabled/>
                    </el-form-item>

                    <el-form-item label="消费电话" style="margin-top: 30px" prop="phone">
                        <el-input @blur="checkIsMember" style="width: 300px" v-model="courseOrder.phone" maxlength="11"
                                  minlength="11"
                                  placeholder="请输入11位手机号"></el-input>
                    </el-form-item>

                    <el-form-item label="教练">
                        <el-select v-model="courseOrder.coach" placeholder="请选择">
                            <el-option
                                    v-for="item in MaintainerList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否会员">
                        <el-switch
                                v-model="order.isMember===1"
                                active-text="是"
                                inactive-text="否"
                                disabled>
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div style="float: right;">
                    <el-button type="primary" size="mini" icon="el-icon-upload2" @click="fixSubmit">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <pay-page ref="pay" :orderMap="orderContent" @saveTheOrder="saveTheOrder"></pay-page>
    </div>
</template>

<script>
    import {getAllCoach} from '@/utils/apis/employee'
    import {saveOrder} from '@/utils/apis/courseOrder'
    import {checkMemberAccount} from "@/utils/apis/member";
    import payPage from '@/views/PayPage'

    export default {
        name: "saveCourseOrder",
        components: {
            payPage
        },
        data() {
            let checkPhone = (rule, value, callback) => {
                // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
                if (value === "") {
                    callback(new Error("请输入手机号"));
                } else if (!this.isCellPhone(value)) {
                    // 引入methods中封装的检查手机格式的方法
                    callback(new Error("请输入正确的手机号!"));
                } else {
                    callback();
                }
            };
            return {
                rules: {
                    price: [
                        {
                            required: true, validator: (rule, value, callback) => {
                                if (!value) return callback(new Error('请输入金额'))
                                if (!Number(value)) return callback(new Error('请输入数字值'))
                                let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
                                if (!reg.test(value)) return callback(new Error('请输入正确价格'));
                                callback();
                            }, trigger: 'blur'
                        },
                    ],
                    phone: [{required: true, validator: checkPhone, trigger: 'blur'}]
                },
                course: {
                    employeeId: 5,
                    count: 1,
                    price: 0.0,
                    course_times: 0
                },
                order: {
                    phone: '',
                    isMember: 0,
                },
                orderContent: {
                    type: 'courseOrder',
                    price: 0,
                    subject: 'vitality健身房课程'
                },
                //教练列表
                MaintainerList: [],
            }
        },
        props: ['saveNewCourseOrderShow', 'courseOrder'],
        methods: {
            //打开窗口的回调
            onOpen() {
                this.initData()
            },
            async initData() {
                this.courseOrder.employeeId = 5
                await getAllCoach().then(res => {
                    this.MaintainerList = res.data.data
                })
                const obj = JSON.parse(JSON.stringify(this.courseOrder))
                this.course.name = obj.name
                this.course.employeeId = this.MaintainerList[0].id
            },
            handleClose() {
                this.cancel()
            },
            cancel() {
                this.$refs['ruleForm'].clearValidate()
                this.$emit('cancel')
                this.$notify.info('取消添加记录')

            },
            fixSubmit() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        if ((this.order.isMember === 0)) {
                            this.$message.warning("该手机号非会员")
                        } else {
                            this.orderContent.price = this.courseOrder.price;
                            this.$refs.pay.closeModal()
                            this.$refs.pay.toPayment()
                        }
                    }
                })
            },
            saveTheOrder() {
                const order = {
                    courseId: this.courseOrder.id,
                    course: this.courseOrder,
                    memberPhone: this.courseOrder.phone,
                    coach: this.courseOrder.coach,
                    price: this.courseOrder.price
                }
                saveOrder(order).then(res => {
                    this.$message.success(res.data.data)
                    this.order = {
                        phone: '',
                        isMember: 0,
                    }
                    this.$emit('cancel')
                })
            },
            //判断手机号是否会员
            async checkIsMember() {
                if (this.courseOrder.phone !== '') {
                    await checkMemberAccount(this.courseOrder.phone).then(res => {
                        const flag = res.data.data
                        if (flag) {
                            this.order.isMember = 1
                        } else {
                            this.order.isMember = 0
                        }
                    })
                }
            },
            isCellPhone(val) {
                if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
                    return false;
                } else {
                    return true;
                }
            },
        }
    }
</script>

<style scoped>

</style>